<template>
  <div class="container-pt">
    <van-nav-bar fixed title="详情" @click-left="$router.back()" left-arrow />
    <div class="content-box">
      <div class="art-tit">{{ infoData.title }}</div>
      <div class="art-desc">
        <span
          >时间:{{ new Date(infoData.create_date).toLocaleDateString() }}</span
        >
        <span>分类：{{ infoData.catename }}</span>
        <span>阅读({{ infoData.click }})</span>
      </div>
      <van-divider />
      <div class="art-content">
        <p v-html="infoData.content"></p>
      </div>
    </div>
    <van-cell>
      <h3 slot="title" class="group-title">相关推荐</h3>
    </van-cell>
    <!-- <recommend-list/> -->

    <van-grid :column-num="2">
      <van-grid-item
        v-for="item in recommend" :key="item.id"
      >
        <van-image
          :src="'http://124.223.14.236:8060/' + item.pic"
          style="height: 126px"
        />
        <p>{{item.title}}</p>
      </van-grid-item>
    </van-grid>

    <van-grid clickable class="bot" :column-num="2" >
      <van-grid-item
        icon="like-o"
        text="收藏"
        @click="clickCollect"
        :class="{ active: action1 === 'del' && type1 === '1' }"
      />
      <van-grid-item
        icon="thumb-circle-o"
        text="点赞"
        @click="clickLike"
        :class="{ active: action2 === 'del' && type2 === '2' }"
      />
    </van-grid>
  </div>
</template>

<script>
// import RecommendList from '../components/recommend-list.vue'
import { articleDetail } from '@/api/article'
import request from '@/utils/request'
export default {
  name: 'showPage',
  data () {
    return {
      infoData: {},
      newData: [],
      recommend: [],
      id: '',
      action1: 'add',
      action2: 'add',
      type1: '1',
      type2: '2'
    }
  },
  // components: { RecommendList },
  async created () {
    // ! 拿到id

    const res = await articleDetail(this.$route.query.id)

    this.id = this.$route.query.id

    this.newData = res.data.recommend

    this.infoData = res.data.info
    this.recommend = res.data.recommend
  },
  methods: {
    // ! 收藏
    async clickCollect () {
      // console.log(this.id)
      await request.get('/user/userDataHandle', {
        params: { article_id: this.id, type: this.type1, action: this.action1 }
      })
      if (this.action1 === 'add') {
        this.action1 = 'del'
      } else {
        this.action1 = 'add'
      }
    },
    // ! 点赞
    async clickLike () {
      await request.get('/user/userDataHandle', {
        params: { article_id: this.id, type: this.type2, action: this.action2 }
      })
      if (this.action2 === 'add') {
        this.action2 = 'del'
      } else {
        this.action2 = 'add'
      }
    }
  }
}
</script>
<style scoped lang="less">
.content-box {
  padding: 20px 20px;
}
.art-tit {
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 20px;
}
.art-desc {
  font-size: 28px;
  color: #aaa;
  span {
    margin-right: 20px;
  }
}
.bot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/ .van-grid-item__content {
  padding: 20px 0;
}
/deep/ .van-grid-item__text {
  margin-top: 0 !important;
}
.group-title {
  color: #1989fa;
}
.active {
  color: #fec635;
}

</style>
